<template>
	<!-- 弹出层：提示打卡成功 -->
	<u-popup :show="showDkSuc" mode="top" closeable customStyle="border-radius: 20rpx; margin: 10rpx 10rpx; padding: 25rpx" @close="close">
		<view class="showDkSuc">
			<view class="showDkSuc-title">
				<u-icon name="volume-fill" color="#2979ff" size="28"></u-icon>
				<view class="showDkSuc-title_name">
					考勤
				</view>
			</view>
			<view class="showDkSuc-content">
				<view class="showDkSuc-content_icon">
					<u-icon name="checkmark-circle-fill" color="#08af00" size="34"></u-icon>
				</view>
				<view class="showDkSuc-content_text" v-if="isBeginDk == true && isEndDk == false">
					<text class="showDkSuc-content_text_title">上班打卡成功</text>
					<view class="showDkSuc-content_text_detail">{{ beginDkTime }}上班打卡(江苏中兴测绘信息有限公司)</view>
				</view>
				<view class="showDkSuc-content_text" v-else >
					<text class="showDkSuc-content_text_title">下班打卡成功</text>
					<view class="showDkSuc-content_text_detail">{{ endDkTime }}下班打卡(江苏中兴测绘信息有限公司)</view>
				</view>
			</view>
			<view class="showDkSuc-btn">
				<u-button class="showDkSuc-btn_confirm" text="我知道了" @click="closeDkSuc"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			// process:[{title:'title',desc:'desc',perList:[],perRequire:false/true},{...}...]
			showDkSuc:{
				type:Boolean,
				default:true
			},
			isBeginDk:{
				type:Boolean,
				default:true
			},
			isEndDk:{
				type:Boolean,
				default:true
			},
			beginDkTime:{
				type:String,
				default:''
			},
			endDkTime:{
				type:String,
				default:''
			}
		},
		data() {
			return {
			}
		},
		methods: {
			// 关闭打卡成功弹框
			closeDkSuc() {
				let isShowDkSuc = false
				this.$emit('isShow', isShowDkSuc);
			},
			close() {
				let isShowDkSuc = false
				this.$emit('isShow', isShowDkSuc);
			}
		}
	}
</script>

<style lang="scss">
	// @import "./clock-success-style/clock-success-style.scss";
	.showDkSuc {
		&-title {
			padding: 10rpx 0;
			font-size: 30rpx;
			display: flex;
			&_name {
				align-self: center;
				margin-left: 6rpx;
			}
		}
		&-content {
			margin: 20rpx 0;
			padding: 10rpx 0;
			display: flex;
			&_icon {
				margin: 0 15rpx;
				align-self: center;
			}
			&_text {
				&_title {
					font-size: 32rpx;
					font-weight: 600;
				}
				&_detail {
					font-size: 30rpx;
					color: rgba(39, 40, 50, 0.6);
					margin: 10rpx 0;
				}
			}
		}
		&-btn {
			&_confirm {
				border-radius: 20rpx;
			}
		}
	}
</style>